Svaret på dette spørsmålet er et fellesskapsinnsats. Rediger eksisterende svar for å forbedre dette innlegget. Det godtar for øyeblikket ikke nye svar eller interaksjoner. Hvordan kan jeg omdirigere brukeren fra en side til en annen ved hjelp av jQuery eller ren JavaScript?
2020-12-07 22:01:49
1
2
Neste
Man omdirigerer ikke bare ved hjelp av jQuery
jQuery er ikke nødvendig, og window.location.replace (...) vil best simulere en HTTP-omdirigering.
window.location.replace (...) er bedre enn å bruke window.location.href, fordi erstatte () ikke holder den opprinnelige siden i øktloggen, noe som betyr at brukeren ikke vil bli sittende fast i en uendelig back- knapp fiasko.
Hvis du vil simulere noen som klikker på en lenke, bruk
location.href
Hvis du vil simulere en HTTP-viderekobling, bruker du location.replace
For eksempel:
// lignende oppførsel som en HTTP-omdirigering
window.location.replace ("http://stackoverflow.com");
// lignende oppførsel som å klikke på en lenke
window.location.href = "http://stackoverflow.com";
|
ADVARSEL: Dette svaret er bare gitt som en mulig løsning; det er åpenbart ikke den beste løsningen, da det krever jQuery. I stedet foretrekker du den rene JavaScript-løsningen.
$ (location) .attr ('href', 'http://stackoverflow.com')
|
Standard "vanilje" JavaScript-måte å omdirigere en side på
window.location.href = 'newPage.html';
Eller enklere: (siden vinduet er globalt)
location.href = 'newPage.html';
Hvis du er her fordi du mister HTTP_REFERER når du viderekobler, fortsett å lese:
(Ellers ignorere denne siste delen)
Følgende avsnitt er for de som bruker HTTP_REFERER som en av mange sikkerhetstiltak (selv om det ikke er et godt beskyttende tiltak). Hvis du bruker Internet Explorer 8 eller lavere, går disse variablene tapt når du bruker en hvilken som helst form for omdirigering av JavaScript-sider (location.href, etc.).
Nedenfor skal vi implementere et alternativ for IE8 og lavere, slik at vi ikke mister HTTP_REFERER. Ellers kan du nesten alltid bare bruke window.location.href.
Testing mot HTTP_REFERER (URL-liming, økt osv.) Kan bidra til å fortelle om en forespørsel er legitim.
(Merk: det er også måter å omgå / forfalske disse henviserne, som bemerket av droops lenke i kommentarene)
Enkel løsning for testing av tvers av nettlesere (fallback til window.location.href for Internet Explorer 9+ og alle andre nettlesere)
Bruk: omdirigering ('anotherpage.aspx');
funksjon omdirigering (url) {
var ua = navigator.userAgent.toLowerCase (),
isIE = ua.indexOf ('msie')! == -1,
versjon = parseInt (ua.substr (4, 2), 10);
// Internet Explorer 8 og lavere
if (isIE && versjon <9) {
var link = document.createElement ('a');
link.href = url;
document.body.appendChild (lenke);
link.click ();
}
// Alle andre nettlesere kan bruke standard window.location.href (de mister ikke HTTP_REFERER som Internet Explorer 8 og lavere gjør)
annet {
window.location.href = url;
}
}
|
Det er mange måter å gjøre dette på.
// vindu. plassering
window.location.replace ('http://www.example.com')
window.location.assign ('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/ sti'
// vindu.historie
window.history.back ()
window.history.go (-1)
// window.navigate; KUN for gamle versjoner av Internet Explorer
window.navigate ('top.jsp')
// Sannsynligvis ingen bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';
// jQuery
$ (location) .attr ('href', 'http: //www.example.com')
$ (vindu) .attr ('location', 'http: //www.example.com')
$ (location) .prop ('href', 'http://www.example.com')
|
Dette fungerer for alle nettlesere:
window.location.href = 'your_url';
|
Det ville hjelpe hvis du var litt mer beskrivende i det du prøver å gjøre. Hvis du prøver å generere sidedata, er det noen alternativer for hvordan du gjør dette. Du kan generere separate lenker for hver side du vil kunne komme direkte til.
1
2
3
...
Merk at gjeldende side i eksemplet håndteres annerledes i koden og med CSS.
Hvis du vil at de sidede dataene skal endres via AJAX, er det her jQuery ville komme inn. Det du ville gjort er å legge til en klikkebehandler til hver av ankerkodene som tilsvarer en annen side. Denne klikkbehandleren vil påkalle noe jQuery-kode som går og henter neste side via AJAX og oppdaterer tabellen med de nye dataene. Eksemplet nedenfor forutsetter at du har en webtjeneste som returnerer de nye sidedataene.
$ (dokument). klar (funksjon () {
$ ('a.pager-link'). klikk (funksjon () {
var side = $ (dette) .attr ('href'). delt (/ \? /) [1];
$ .ajax ({
type: 'POST',
url: '/ path-to-service',
data: side,
suksess: funksjon (innhold) {
$ ('# myTable'). html (innhold); // erstatte
}
});
returner falsk; // for å stoppe lenken
});
});
|
Jeg tror også at location.replace (URL) er den beste måten, men hvis du vil varsle søkemotorene om omdirigering (de analyserer ikke JavaScript-koden for å se omdirigering), bør du legge til rel = "canonical" meta tag til nettstedet ditt.
Å legge til en noscript-seksjon med en HTML-oppdateringsmetakode i er også en god løsning. Jeg foreslår at du bruker dette JavaScript-omdirigeringsverktøyet tillage omdirigeringer. Den har også Internet Explorer-støtte for å passere HTTP-henviseren.
Eksempelkode ser uten forsinkelse slik ut:
|
Men hvis noen vil omdirigere tilbake til hjemmesiden, kan han bruke følgende kodebit.
window.location = window.location.host
Det vil være nyttig hvis du har tre forskjellige miljøer som utvikling, iscenesettelse og produksjon.
Du kan utforske dette vinduet eller window.location-objektet ved å bare sette disse ordene i Chrome Console eller Firebugs Console.
|
JavaScript gir deg mange metoder for å hente og endre gjeldende URL som vises i nettleserens adressefelt. Alle disse metodene bruker Location-objektet, som er en egenskap for Window-objektet. Du kan opprette et nytt lokasjonsobjekt som har gjeldende URL slik:
var currentLocation = window.location;
Grunnleggende struktur for en URL
//:/
Protokoll - Spesifiserer protokollnavnet som skal brukes til å få tilgang til ressursen på Internett. (HTTP (uten SSL) eller HTTPS (med SSL))
vertsnavn - Vertsnavn angir verten som eier ressursen. For eksempel www.stackoverflow.com. En server gir tjenester ved å bruke navnet på verten.
port - Et portnummer som brukes til å gjenkjenne en bestemt prosess som en Internett- eller annen nettverksmelding skal videresendes til når den kommer til en server.
stinavn - Stien gir informasjon om den spesifikke ressursen i verten som webklienten vil ha tilgang til. For eksempel stackoverflow.com/index.html.
spørring - En spørringsstreng følger banekomponenten, og gir en informasjonsstreng som ressursen kan bruke til et eller annet formål (for eksempel som parametere for et søk eller som data som skal behandles).
hash - Ankerdelen av en URL inkluderer hash-tegnet (#).
Med disse egenskapene for Location-objekter kan du få tilgang til alle disse URL-komponentene
hash - Angir eller returnerer ankerdelen av en URL.
vert -Sett
eller returnerer vertsnavnet og porten til en URL.
vertsnavn -Sett eller
returnerer vertsnavnet til en URL.
href -Setter eller returnerer hele
URL.
banenavn - Angir eller returnerer banenavnet til en URL.
port - Angir eller returnerer portnummeret serveren bruker for en URL.
protokoll - Angir eller returnerer protokollen til en URL.
søk -sett
eller returnerer spørringsdelen av en URL
Nå Hvis du vil endre en side eller omdirigere brukeren til en annen side, kan du bruke href-egenskapen til Stedobjektet som dette
Du kan bruke href-egenskapen til Location-objektet.
window.location.href = "http://www.stackoverflow.com";
Location Object har også disse tre metodene
tilordne () - Laster inn et nytt dokument.
reload () - Last gjeldende dokument på nytt.
erstatt () - Erstatter det gjeldende dokumentet med et nytt
Du kan bruke tilordne () og erstatte metoder også for å omdirigere til andre sider som disse
location.assign ("http://www.stackoverflow.com");
location.replace ("http://www.stackoverflow.com");
Hvordan tilordne () og erstatte () er forskjellig - Forskjellen mellom erstatte () metode og tilordne () metode () er at erstatte () fjerner nettadressen til det gjeldende dokumentet fra dokumenthistorikken, betyr at det ikke er mulig å bruke "tilbake" -knappen for å navigere tilbake til originaldokumentet. Så bruk tildelingsmetoden () hvis du vil laste inn et nytt dokument, og vil gi muligheten til å navigere tilbake til originaldokumentet.
Du kan endre plasseringsobjektet href-egenskap ved hjelp av jQuery også som dette
$ (location) .attr ('href', url);
Og dermed kan du omdirigere brukeren til en annen url.
|
I utgangspunktet er jQuery bare et JavaScript-rammeverk, og for å gjøre noen av tingene som omdirigering i dette tilfellet, kan du bare bruke ren JavaScript, så i så fall har du 3 alternativer ved å bruke vaniljeJavaScript:
1) Ved å bruke stedet erstatter, vil dette erstatte den nåværende historikken til siden, betyr at det ikke er mulig å bruke tilbake-knappen for å gå tilbake til den opprinnelige siden.
window.location.replace ("http://stackoverflow.com");
2) Ved å bruke plasseringstildeling vil dette beholde historikken for deg, og ved å bruke tilbake-knappen kan du gå tilbake til den opprinnelige siden:
window.location.assign ("http://stackoverflow.com");
3) Jeg anbefaler å bruke en av de tidligere måtene, men dette kan være det tredje alternativet ved hjelp av ren JavaScript:
window.location.href = "http://stackoverflow.com";
Du kan også skrive en funksjon i jQuery for å håndtere den, men anbefales ikke, da det bare er en linjers ren JavaScript-funksjon. Du kan også bruke alle funksjonene ovenfor uten vindu hvis du allerede er i vindusomfanget, for eksempel window.location.replace ("http://stackoverflow.com"); kan være location.replace ("http://stackoverflow.com");
Også viser jeg dem alle på bildet nedenfor:
|
Bør bare være i stand til å stille inn ved hjelp av window.location.
Eksempel:
window.location = "https://stackoverflow.com/";
Her er et tidligere innlegg om emnet: Hvordan omdirigerer jeg til en annen webside?
|
Før jeg begynner, er jQuery et JavaScript-bibliotek som brukes til DOM-manipulering. Så du bør ikke bruke jQuery for en sideomdirigering.
Et sitat fra Jquery.com:
Mens jQuery kan kjøre uten større problemer i eldre nettleserversjoner,
vi tester ikke jQuery aktivt i dem og retter vanligvis ikke feil
som kan vises i dem.
Det ble funnet her:
https://jquery.com/browser-support/
Så jQuery er ikke en slutt-og-være-alt-løsning for bakoverkompatibilitet.
Følgende løsning ved hjelp av rå JavaScript fungerer i alle nettlesere og har vært standard i lang tid, slik at du ikke trenger noen biblioteker for støtte for nettlesere.
Denne siden omdirigeres til Google etter 3000 millisekunder
eksempel
Du blir snart omdirigert til google.
setTimeout (funksjon () {
window.location.href = "http://www.google.com"; // URL-en som også blir omdirigert.
}, 3000); // Jo større tall jo lengre forsinkelse.